<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet"
	href="/plugins/select2/css/select2.min.css">
<link rel="stylesheet"
	href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<th:block data-th-replace="/adminlte/base::base-head"></th:block>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">
		<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
		<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
		<div class="modal fade" id="dialog-theme-set">
			<div class="modal-dialog">
				<div class="modal-content"
					style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
					<div class="modal-header">
						<h4 class="modal-title">设置主题</h4>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form role="form" action="/themes/path" method="put">
						<input type="hidden" name="path" data-v="path">
						<div class="modal-body">
							<div class="form-group">
								<label>请选择一个路径</label> <select
									class="selectpicker show-tick form-control"
									data-live-search="true" name="uri" data-style="btn-info">
									<option data-th-each="uri:${themeUriList}"
										th:utext="${uri==null?'未映射':(uri.length()==0?'默认主题':('/'+uri+'/'))}"
										th:value="${uri}"></option>
								</select>
							</div>
						</div>
						<div class="modal-footer">
							<button class="btn btn-default float-left" data-dismiss="modal"
								style="width: 100px" type="button">取消</button>
							<button class="btn btn-success float-right" style="width: 100px"
								type="submit">确定</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="content-wrapper">
			<th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12 container-fluid">
							<div class="card">
								<div class="card-header row align-items-center">
									<div class="card-title">主题列表</div>
									<div class="ml-auto">
										<button class="btn btn-primary" onclick="onClick('#image')">新增主题</button>
										<input data-par-tag="themeFile" id="image" type="file"
											style="display: none;" accept="application/zip"
											data-progress="#progress" data-url="/themes/upload"
											onchange="uploadThis(this)" />
									</div>
								</div>
								<div class="progress">
									<div id="progress"
										class="progress-bar progress-bar-success progress-bar-striped active"
										role="progressbar" style="min-width: 2em;">0%</div>
								</div>
								
								<div class="card-body">
									<div class="row">
										<div class="col-sm-3" th:each="theme:${themeList}"
											style="min-width: 320px;">
											<div class="card">
												<div class="card-body">
													<div style="width: 100%; height: auto; overflow: hidden;">
														<img alt="" src="/admin-base/thumbnail.png"
															th:src="${theme.getTargetUri()}"
															style="width: 100%; height: auto;">
													</div>
													<h5 class="mt-3 text-primary">
														主题目录：
														<th:block th:utext="${theme.path}"></th:block>
													</h5>
													<h6 class="mt-3 text-info">
														映射路径：
														<th:block
															th:utext="${theme.uri==null?'未映射':(theme.uri.length()==0?'/':('/'+theme.uri+'/'))}"></th:block>
													</h6>

													<div class="row mt-3" th:if="${theme.enable}">
														<button class="btn btn-default my-2 col-12"
															disabled="disabled">不可操作</button>
													</div>
													<div class="row mt-3" th:unless="${theme.enable}">
														<button class="btn btn-primary my-2 col-12 col-md-5"
															data-dialog-confirm="/themes/turn/:put"
															th:data-path="${theme.path}"
															th:data-dialog-t-msg="${'是否启用该主题？'}">启用</button>
														<button
															class="btn btn-danger my-2 col-12 col-md-5 offset-md-2"
															data-dialog-confirm="/themes/:delete"
															th:data-path="${theme.path}"
															 data-dialog-t-msg="是否删除该主题？">删除</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
		<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
	</div>
	<script src="/plugins/select2/js/select2.full.min.js"></script>
	<script src="/admin/theme-setting.js"></script>
</body>
</html>